<template>
	<view class="main-continer">
		<div class='item' v-for="(item,index) in liveList" :key="index" @click="itemClick(item,true)">
			<image class="image" :src="item.imageUrl"></image>
			<view class="text">{{item.channelName.zh_CN}}</view>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				liveList: [],
				videoList: [],
				liveImageList: [
					'../../static/image/people/c_1.png',
					'../../static/image/people/c_2.png',
					'../../static/image/people/c_4.png',
					'../../static/image/people/c_5.png',
					'../../static/image/people/c_7.png',
					'../../static/image/people/c_8.png',
					'../../static/image/people/c_10.png',
					'../../static/image/people/c_11.png',
					'../../static/image/people/c_12.png',
					'../../static/image/people/c_13.png',
					'../../static/image/people/c_14.png',
					'../../static/image/people/c_15.png',
				]
			}
		},

		mounted() {
			this.getData()
		},
		methods: {
			itemClick(item, isLive) {
				0
				let obj = {
					url: item.channelUrl,
					isLive: isLive
				}
				uni.navigateTo({
					url: `./testvideo?obj=${encodeURIComponent(JSON.stringify(obj))}`,
				})

			},
			getData() {

				this.$api.request.getchannel({}, (res) => {
					if (res.body.status.statusCode == '0') {
						this.liveList = res.body.data.channelModelBo
						this.liveImageList.forEach((item, index) => {
							this.liveList.forEach((mItem, mIndex) => {
								if (index == mIndex) {
									this.$set(mItem, 'imageUrl', item)
								}
							})
						})
					}
				})
				// this.$api.request.getMusic({}, (res) => {
				// 	if (res.body.status.statusCode == '0') {
				// 		console.log(res.body.status)
				// 		this.videoList = res.body.data.vos
				// 	}
				// })
			},

			/**
			 * 更多直播页面
			 */
			liveMore() {

			}
		}

	}
</script>

<style lang="scss" scoped>
	.main-continer {
		width: 100vw;
		height: 100vh;
		background-color: #F8F8F8;

		.item {
			margin-left: 20upx;
			margin-right: 20upx;
			padding-top: 32upx;
			display: flex;
			align-items: center;

			.image {
				width: 200upx;
				height: 144upx;
				background-color: #F0F0F0;
			}

			.text {
				margin-left: 32upx;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				font-size: 40upx;
				line-height: 56upx;
				/* identical to box height */
				color: #646869;
			}
		}
	}
</style>
